<template>
	<view class="w-process">
		<view class="list" v-if="data.list.length">
			<view class="li" v-for="(item, index) in data.list" :key="index" @click="itemClick(item)">
				<view class="title">{{ item.compName }}</view>
				<view class="dutyNo">{{ item.compCc }}</view>
			</view>
		</view>
		<!-- 沒有数据显示 -->
		<view class="no-data" v-else>{{ '暂无数据' }}</view>
		<!-- 按鈕 -->
		<view class="button-list">
			<view class="button-item" style="background-color: #D4D4D4;width: 30%;" @click="cancel">取消</view>
			<view class="button-item" @click="saveClick" style="width: 70%;">添加发票抬头</view>
		</view>

		<!-- 抬头弹框 新增和修改 -->
		<uni-popup ref="inputDialog" type="dialog" :mask-click="false">
			<view class="input-dialog-box">
				<uni-forms :modelValue="formData" :rules="rules" label-width="160rpx">
					<uni-forms-item class="forms_item" label="公司名称" required name="compName">
						<uni-easyinput type="text" v-model="formData.compName" placeholder="请输入公司名称" />
					</uni-forms-item>
					<uni-forms-item class="forms_item" label="税 号" required name="compCc">
						<uni-easyinput type="text" v-model="formData.compCc" placeholder="请输入税号" />
					</uni-forms-item>
					<uni-forms-item class="forms_item" label="单位地址" name="compAddress">
						<uni-easyinput type="text" v-model="formData.compAddress" placeholder="请输入单位地址" />
					</uni-forms-item>
					<uni-forms-item class="forms_item" label="电话号码" name="compPhone">
						<uni-easyinput type="text" v-model="formData.compPhone" placeholder="请输入电话号码" />
					</uni-forms-item>
					<uni-forms-item class="forms_item" label="开户银行" name="openingBank">
						<uni-easyinput type="text" v-model="formData.openingBank" placeholder="请输入开户银行" />
					</uni-forms-item>
					<uni-forms-item class="forms_item" label="银行账户" name="obAccount">
						<uni-easyinput type="text" v-model="formData.obAccount" placeholder="请输入银行账户" />
					</uni-forms-item>
				</uni-forms>
				<view class="input-dialog-footer">
					<view class="input-dialog-button" @click="cancelFn" v-if="!data.show">
						{{ $t('calendar.cancel') }}
					</view>
					<view class="input-dialog-button dialog-button-left" @click="confirmFn" v-if="!data.show">
						{{ $t('calendar.confirm') }}
					</view>
					<view class="input-dialog-button dialog-button-left" style="width: 100%;" @click="updateItemClick"
						v-else>
						{{ $t('calendar.confirm') }}
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 查看和删除 -->
		<uni-popup ref="lookDialog" type="dialog">
			<view class="lookBoox">
				<view class="look-header">
					{{ data.liRow.compName }}
					<img class="icon" src="./img/update.png" @click="updateClick" />
					<img class="icon icon2" src="./img/delete.png" @click="deleteClick" />
				</view>
				<view class="look-content">
					<view class="name">税 号</view>
					<view class="content">{{ data.liRow.compCc }}</view>
				</view>
				<view class="look-content">
					<view class="name">单位地址</view>
					<view class="content">{{ data.liRow.compAddress }}</view>
				</view>
				<view class="look-content">
					<view class="name">电话号码</view>
					<view class="content">{{ data.liRow.compPhone }}</view>
				</view>
				<view class="look-content">
					<view class="name">开户银行</view>
					<view class="content">{{ data.liRow.openingBank }}</view>
				</view>
				<view class="look-content">
					<view class="name">银行账户</view>
					<view class="content">{{ data.liRow.obAccount }}</view>
				</view>
				<view class="Two_dimensional_code">
					<view class="code">
						<img :src="data.twoUrl" />
					</view>
					<view class="tip">开票时出示</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { invoiceHeader, invoiceHeaderSelect, invoiceHeaderDelete, invoiceHeaderUpdate } from '@/api/invoice.js'

const inputDialog = ref(null)
const lookDialog = ref(null)

const data = reactive({
	list: [],
	show: false,
	liRow: {},
	twoUrl:''
})

const formData = reactive({
	compName: '',
	compCc: '',
	compAddress: '',
	compPhone: '',
	openingBank: '',
	obAccount: '',
	qrPath: '',
})

// 规则
const rules = reactive({
	compName: {
		rules: [
			{ required: true, message: '公司名称不能为空' },
			{ min: 2, max: 30, message: '公司名称在2-30个字符之间' }
		],
		label: '公司名称',
		validateTrigger: 'confirmFn'
	},
	compCc: {
		rules: [
			{ required: true, message: '税号不能为空' },
			{ min: 15, max: 20, message: '税号在15-20个字符之间' }
		],
		label: '税号',
		validateTrigger: 'confirmFn'
	}
})

onMounted(() => {
	select()
})

const select = () => {
	invoiceHeaderSelect().then(res => {
		data.list = res.data
	})
}

// 添加和取消
const saveClick = () => {
	data.show = false
	formData.compName = ''
	formData.compCc = ''
	formData.compAddress = ''
	formData.compPhone = ''
	formData.openingBank = ''
	formData.obAccount = ''
	formData.qrPath = ''
	inputDialog.value.open();
}
const cancel = () => {
	uni.navigateBack({
		delta: 1
	});
}

// 弹框取消
const cancelFn = () => {
	inputDialog.value.close();
}

// 弹框保存
const confirmFn = () => {
	if (!formData.compName) {
		uni.showToast({
			title: '公司名称必填',
			icon: 'error'
		})
		return
	}
	if (!formData.compCc) {
		uni.showToast({
			title: '税号必填',
			icon: 'error'
		})
		return
	}
	invoiceHeader(formData).then(res => {
		console.log(res)
		if (res.statusCode == 200) {
			uni.showToast({ title: res.message, icon: 'success' })
			inputDialog.value.close()
			select()
		}
	})
}

// 点击查看
const itemClick = (item) => {
	data.show = true
	data.liRow = item
	lookDialog.value.open();
	// data.twoUrl=generateQRCode(item.compCc)
	formData.compName = item.compName
	formData.compCc = item.compCc
	formData.compAddress = item.compAddress
	formData.compPhone = item.compPhone
	formData.openingBank = item.openingBank
	formData.obAccount = item.obAccount
	formData.qrPath = item.qrPath
}

const updateClick = () => {
	lookDialog.value.close();
	inputDialog.value.open();
	data.show = true
}

const deleteClick = () => {
	invoiceHeaderDelete(data.liRow.id).then(res => {
		if (res.statusCode == 200) {
			uni.showToast({ title: res.data.message, icon: 'success' })
			lookDialog.value.close();
			select()
		}
	})
}

const updateItemClick = () => {
	if (!formData.compName) {
		uni.showToast({
			title: '公司名称必填',
			icon: 'error'
		})
		return
	}
	if (!formData.compCc) {
		uni.showToast({
			title: '税号必填',
			icon: 'error'
		})
		return
	}
	invoiceHeaderUpdate(formData).then(res => {
		if (res.statusCode == 200) {
			uni.showToast({ title: res.message, icon: 'success' })
			inputDialog.value.close()
			select()
		}
	})
}

// 二维码

</script>

<style lang="less" scoped>
.w-process {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	// display: flex;
	// flex-direction: column;
	background-color: #F5F5F5;

	.list {
		height: auto;
		width: 100%;
		padding: 20rpx 16rpx;
		box-sizing: border-box;

		.li {
			width: 100%;
			height: 160rpx;
			display: flex;
			flex-direction: column;
			background-color: #33C5B9;
			box-sizing: border-box;
			text-align: center;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.title {
				line-height: 80rpx;
				border-bottom: 2rpx solid #fff;
				height: 80rpx;
			}

			.dutyNo {
				flex: 1;
				line-height: 80rpx;
			}
		}
	}
}

.button-list {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	flex-direction: row;

	.button-item {
		height: 100%;
		text-align: center;
		font-size: 32rpx;
		background-color: #33C5B9;
		color: #fff;
	}
}

.input-dialog-box {
	width: 640rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	overflow: hidden;
}

.forms_item {
	padding: 14rpx 20rpx;
	box-sizing: border-box;
	margin: 0 !important;
	border-bottom: 2rpx solid #F7F8F9;
}

.input-dialog-footer {
	display: flex;
	flex-direction: row;
	border-top-color: #f5f5f5;
	border-top-style: solid;
	border-top-width: 1px;
}

.input-dialog-button {
	display: flex;
	flex: 1;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 90rpx;
	color: #333;
}

.dialog-button-left {
	border-left-color: #f0f0f0;
	border-left-style: solid;
	border-left-width: 1px;
	color: #007aff;
}

.input-dialog-content {
	padding: 20px;
}

.input-dialog-item {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.input-dialog-item {
	line-height: 52rpx;
	font-size: 28rpx;
}

.no-data {
	margin: 10rpx auto;
	text-align: center;
}

.lookBoox {
	width: 640rpx;
	background-color: #33C5B9;
	border-radius: 10rpx;
	padding: 20rpx 0;
	display: flex;
	flex-direction: column;
	color: #fff;

	.look-header {
		line-height: 80rpx;
		padding: 0 20rpx;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: 600;
		position: relative;

		.icon {
			display: inline-block;
			height: 40rpx;
			width: 40rpx;
			margin-right: 10rpx;
			position: absolute;
			top: 20rpx;
			margin-left: 10rpx;
		}

		.icon2 {
			margin-left: 60rpx;
		}
	}

	.look-content {
		padding: 0 20rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;

		.name {
			width: 160rpx;
		}

		.content {
			flex: 1;
		}
	}

	.Two_dimensional_code {
		margin-top: 20rpx;
		width: 100%;
		height: 400rpx;
		border-top: 2rpx solid #fff;

		.code {
			margin: 30rpx 0;
			height: 240rpx;
			width: 100%;
			text-align: center;
		}

		.tip {
			line-height: 40rpx;
			text-align: center;
		}
	}
}
</style>
